<template>
  <navbar>
    <button
      class="navbar-toggler mobile-sidebar-toggler d-lg-none"
      type="button"
      @click="mobileSidebarToggle"
    >&#9776;</button>
    <a class="navbar-brand"></a>
    <ul class="nav navbar-nav d-md-down-none">
      <li class="nav-item">
        <a class="nav-link navbar-toggler sidebar-toggler" @click="sidebarMinimize">&#9776;</a>
      </li>
    </ul>

    <!-- <ul class="nav navbar-nav d-md-down-none">
      <li class="nav-item header-item">
        <router-link tag="div" to="/" style="height:55px;" class="nav-link">
          <p>
            <Icon type="compose" size="30" color="#2d8cf0"></Icon>
          </p>
          <p style="color:white">留言管理</p>
        </router-link>
      </li>
      <li class="nav-item header-item">
        <router-link tag="div" to="/home1" style="height:55px;" class="nav-link">
          <p>
            <Icon type="stats-bars" size="30" color="#2d8cf0"></Icon>
          </p>
          <p style="color:white">浏览排行</p>
        </router-link>
      </li>

      <li class="nav-item header-item">
        <Dropdown>
          <router-link tag="div" to="/" style="height:55px;" class="nav-link">
            <p>
              <Icon type="android-cloud" size="30" color="#2d8cf0"></Icon>
            </p>
            <p style="color:white">云服务器</p>
          </router-link>
          <DropdownMenu slot="list">
            <DropdownItem>Linux</DropdownItem>
            <DropdownItem>Mac OS X</DropdownItem>
            <DropdownItem>Windows</DropdownItem>

            <DropdownItem>Core OS</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </li>

      <li class="nav-item header-item">
        <router-link tag="div" to="/home1" style="height:55px;" class="nav-link">
          <p>
            <Icon type="trophy" size="30" color="#2d8cf0"></Icon>
          </p>
          <p style="color:white">销量排行</p>
        </router-link>
      </li>
    </ul> -->

    <ul class="nav navbar-nav ml-auto">
      <li class="nav-item d-md-down-none">
        <a class="nav-link">
          <Icon type="android-notifications" size="20"></Icon>
          <span class="badge badge-pill badge-danger">5</span>
        </a>
      </li>

      <Dropdown class="nav-item">
        <a href="javascript:void(0)">
          <span slot="button">
            <img src="static/img/avatars/6.jpg" class="img-avatar" alt="o">
            <span class="d-md-down-none">admin</span>
          </span>
        </a>
        <Dropdown-menu slot="list">
          <Dropdown-item>
            <p class="dropdown-itemp">
              完善资料
              
            </p>
          </Dropdown-item>
          <Dropdown-item>
            <p class="dropdown-itemp">
              修改密码
              
            </p>
          </Dropdown-item>
          <Dropdown-item>
            <a href @click="Logout">
              <p class="dropdown-itemp">
                退出
              </p>
            </a>
          </Dropdown-item>
        </Dropdown-menu>
      </Dropdown>

      <li class="nav-item d-md-down-none">
        <a class="nav-link navbar-toggler aside-menu-toggler" @click="asideToggle">&#9776;</a>
      </li>
    </ul>
  </navbar>
</template>
<script>
import navbar from "./Navbar";

export default {
  name: "header",
  components: {
    navbar
  },
  methods: {
    Logout(e) {
      e.preventDefault();
      this.$store
        .dispatch("LogOut")
        .then(() => {
          this.$router.push({ path: "/login" });
        })
        .catch(err => {
          this.$message.error(err);
        });
    },
    click() {
      // do nothing
    },
    sidebarToggle(e) {
      e.preventDefault();
      document.body.classList.toggle("sidebar-hidden");
    },
    sidebarMinimize(e) {
      e.preventDefault();

      document.body.classList.toggle("sidebar-minimized");
    },
    mobileSidebarToggle(e) {
      e.preventDefault();
      document.body.classList.toggle("sidebar-mobile-show");
    },
    asideToggle(e) {
      e.preventDefault();
      document.body.classList.toggle("aside-menu-hidden");
    }
  }
};
</script>

<style type="text/css" scoped>
.dropdown-itemp {
  text-align: center;
  font-size: 15px;
  padding: 10px;
}
.header-item .ivu-dropdown-item {
  padding: 15px;
}
.header-item {
  width: 130px;
  height: 55px;
}
.header-item a {
  color: white !important;
}
</style>
